<template>
	<view class="container" v-if="props.show">
		<view class="loading">
			<image class="icon" src="../../static/logo.png" mode=""></image>
			<br />
			<text>{{props.title}}</text>
		</view>
	</view>
</template>
<script setup>
	import {
		onMounted
	} from 'vue';
	const props = defineProps({
		show: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: '请传入title属性'
		}
	})
	onMounted(()=>{
		
	})
</script>
<style lang="scss" scoped>
	.container {
		.loading {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 130px;
			height: 100px;
			margin: 30px 0 0 -65px;
			background-color: rgba(0, 0, 0, .8);
			text-align: center;
			border-radius: 6px;
			text {
				color: #ccc;
			}
			.icon {
				width: 40px;
				height: 40px;
				margin: 15px 0 6px 0;
				animation: rotate 2s ease-in-out infinite;
			}
			@keyframes rotate {
			  0% { transform: rotate(0deg); }
			  80% { transform: rotate(-360deg); }
			  100% { transform: rotate(-360deg); }
			}
		}
	}
</style>